<template>
  <div class="add-node-btn-box">
    <div class="line"></div>
    <div class="add-node-btn">
      <el-popover placement="right-start" v-model="visible" trigger="click" width="326px">
        <div class="add-node-popover-body">
          <a class="add-node-popover-item approver" @click="add(1)">
            <div class="item-wrapper">
              <i class="icon iconfont">&#xe65e;</i>
            </div>
            <p>审批人</p>
          </a>
          <a class="add-node-popover-item notifier" @click="add(2)">
            <div class="item-wrapper">
              <i class="icon iconfont">&#xe65d;</i>
            </div>
            <p>抄送人</p>
          </a>
          <a class="add-node-popover-item condition" @click="add(4)">
            <div class="item-wrapper">
              <i class="icon iconfont">&#xe70f;</i>
            </div>
            <p>条件分支</p>
          </a>
        </div>
        <template #reference>
          <i class="icon iconfont add-btn">&#xe658;</i>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { NodeItem } from '../types'
import * as utils from '../FlowPanel'
const visible = ref<boolean>(false)
const props = defineProps({
  prevId: {
    type: String,
    default: () => {
      return ''
    }
  }
})
const { addNode } = inject<{ addNode: (node: NodeItem) => void }>('flowTree', {
  addNode: () => {}
})
const add = (type: number) => {
  visible.value = false
  const obj: NodeItem = utils.createNode()
  obj.prevId = props.prevId
  switch (type) {
    // 审核人
    case 1:
      obj.type = 1
      obj.name = '审核人'
      obj.nodeId = 'audit-' + new Date().getTime()
      break
    // 抄送人
    case 2:
      obj.type = 2
      obj.name = '抄送人'
      obj.nodeId = 'delivery-' + new Date().getTime()
      break
    // 分支节点
    case 4:
      obj.type = 4
      obj.nodeId = 'branch-' + new Date().getTime()
      obj.conditionNodes = utils.createConditionNode(obj.nodeId)
      break
    default:
      break
  }
  // 增加节点
  addNode(obj)
}
</script>

<style scoped></style>
